<template>
  <van-tabs v-model="active" swipeable animated :lazy-render="false">
    <!-- <van-tab v-for="index in 4" :title="'选项 ' + index" :key="index"> -->
    <van-tab title="我的">
      <div id="middle">
        <my></my>
      </div>
    </van-tab>
    <van-tab title="主页">
      <div id="middle">
        <home></home>
      </div>
    </van-tab>
  </van-tabs>
</template>

<script>
// 导入home组件
import home from "./home/Home.vue";
import my from "./my/My.vue";
import { Notify } from "vant";
export default {
  data: function() {
    return {
      active: 1,
      // flag控制是否显示组件
      flag: true
    };
  },
  methods: {},
  components: {
    home: home,
    my: my
  },
  watch: {
    //监视active的变化，导航栏切换时展示对应的组件，减少首次加载时的资源
    // 为了减少请求，home组件选择使用v-show
    active: function(newValue) {
      if (newValue == 1) {
        this.flag = true;
      } else {
        this.flag = false;
      }
    }
  },
  // 检查是否有本地登录记录
  beforeCreate() {
    // window.localStorage.removeItem("cookie");
    if (
      localStorage.getItem("cookie") == null ||
      localStorage.getItem("uid") == null
    ) {
      Notify({ type: "primary", message: "请登录", duration: 2000 });
      this.$router.push("/login");
    }
  }
};
</script>

<style lang="scss">
</style>